<template>
    <div class="main-box">
        <div class="dl-row mar-bottom-20">
            <div class="search-box" style="margin-right: 20px">
                <el-input
                        placeholder="请输入试题关键字"
                        prefix-icon="el-icon-search"
                        v-model="inputSearch">
                </el-input>
            </div>
            <el-button type="success" round size="small" @click="init()">搜索</el-button>
        </div>
		<div v-if="data.length>0"  v-loading="loading">
			<div class="border-main mar-bottom-20 sb-main-box" v-for="(question,index) in data" :key="index">
			          <div class="dl-row-sb mar-bottom-15">
			            <div class="dl-row center answer">
			              <h2>{{index+1}}、{{question.questionDesc}}</h2>
			            </div>
			            <div>
			              <el-button type="primary" size="mini" round plain @click="cancelCollection(question)">取消收藏</el-button>
						 <!-- <i class="el-icon-star-on down-star" style="color: #0068b6;font-size: 24px;" @click="cancelCollection(question)"></i> -->
			            </div>
			          </div>
			            <el-collapse accordion class="mar-bottom-15 right-answer">
			                <el-collapse-item name="1">
			                    <template slot="title">
			                        <div class="dl-row center answer">
			                            <span class="topic-tag">{{getOptionType(question.optionType)}}</span>
			                            <div class="dl-row center">
			                                <h1>正确答案：</h1>
			                            </div>
			                        </div>
			                    </template>
			                    <div v-for="(right,rightIndex) in getRight(question.optList)" :key="rightIndex">
			                      <div class="answer dl-row">
			                        <span class="face"></span><p>{{right.answerDesc}}</p>
			                      </div>
			<!--                        <el-checkbox v-model="rightChecked" disabled>{{right.answerDesc}}</el-checkbox>-->
			                    </div>
			                </el-collapse-item>
			            </el-collapse>
			            <ul class="option">
			                <li class="dl-row start" v-for="(option,optionIndex) in question.optList"
			                    :key="optionIndex">
			                    <span></span>
			                    <p>{{option.answerDesc}}</p>
			                </li>
			            </ul>
			        </div>
			        <el-pagination
						:total="total"
						:current-page="page + 1"
						style="margin-top: 8px;"
						layout="total, prev, pager, next, sizes"
						@size-change="sizeChange"
						@current-change="pageChange"/>
		</div>
		<div class="note-box mar-top-20" v-if="data.length==0  && !loading">
			<el-empty class="empty" :image-size="250" :image="require('../../../assets/no_data_images/no_collect.png')" description="无收藏记录"></el-empty>
		</div>

    </div>
</template>

<script>
    import initData from '@/mixins/initData'
    import {cancelCollect} from '@/api/collect'

    export default {
        name: "bankCollect",
        mixins: [initData],
        data() {
            return {
                inputSearch: '',
                rightChecked: true
            }
        },
        methods: {
            getRight(optionList) {
                return optionList.filter(item => item.isTrue === 1)
            },
            getOptionType(optionType) {
                switch (optionType) {
                    case 0:
                        return '单选题';
                    case 1:
                        return '多选题';
                    case 2:
                        return '判断题';
                }
            },
            beforeInit() {
                this.url = 'web/collect-record/bank-page-list'
                this.params = {page: this.page, size: this.size, name: this.inputSearch}
                return true
            },
            cancelCollection(question) {
                cancelCollect(question.id).then(res => {
                    this.init()
                    this.$message.success(`已取消收藏！`)
                })
            }
        }
    }
</script>

<style scoped>
.el-button--primary{
  margin-left: 20px;
}

</style>
